<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        if(!location.hash.replace('#', '').length) {
            location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
            location.reload();
        }
    </script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">

    <title>Audio/Video/Screen sharing and recording using RTCMultiConnection</title>
    
    <meta name="description" content="Audio/Video/Screen sharing and recording using RTCMultiConnection" />
    <meta name="keywords" content="Audio Recording, Video Recording, Screen Recording, RTCMultiConnection" />

    <style>
        video {
            width: 45%;
        }

        button {
            padding: 4px 12px;
            margin: 5px 10px;
        }

        hr {
            border: 0;
            border-top: 1px solid rgb(189, 189, 189);
        }
    </style>
</head>

<body>
    <article>

        <header style="text-align: center;">
            <h1>
                Audio/Video/Screen sharing and recording using 
                <a href="https://github.com/muaz-khan/RTCMultiConnection">RTCMultiConnection</a> 
                / <a href="https://github.com/muaz-khan/RTCMultiConnection/tree/master/v2.2.2/demos/audio-video-screen-sharing-recording.html">Source Code</a>
            </h1>
            <p>
                <a href="https://rtcmulticonnection.herokuapp.com/">HOME</a>
                <span> &copy; </span>
                <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
                <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
                <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
                <a href="https://github.com/muaz-khan/RTCMultiConnection/issues?state=open" target="_blank">Latest issues</a> .
                <a href="https://github.com/muaz-khan/RTCMultiConnection/commits/master" target="_blank">What's New?</a>
            </p>
        </header>

        <div class="github-stargazers"></div>

        <section class="experiment">
            <div style="text-align:center;">
                <button id="openRoom">Open Room</button>
                <button id="joinRoom">Join Room</button>

                <hr>

                <button id="shareScreen" disabled>Share Screen</button>

                <hr>
                <button id="recordAudioVideo" disabled>Record Audio+Video+Screen</button>
            </div>

            <hr>
            <h2 style="border:0;padding-left:10px;">Recorded Videos</h2><br>
            <div id="recorded-videos"></div>
            
            <hr>
            <h2 style="border:0;padding-left:10px;">Live Videos</h2><br>
            <div id="videos-container"></div>

            <br><br>
        </section>

        <script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>
        <script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
        <script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
        <script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>

        <script>
            // http://www.rtcmulticonnection.org/docs/constructor/
            var rmc = new RTCMultiConnection();

            // https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
            var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
            rmc.openSignalingChannel = function(config) {
                var channel = config.channel || rmc.channel || 'default-namespace';
                var sender = Math.round(Math.random() * 9999999999) + 9999999999;

                io.connect(SIGNALING_SERVER).emit('new-channel', {
                    channel: channel,
                    sender: sender
                });

                var socket = io.connect(SIGNALING_SERVER + channel);
                socket.channel = channel;

                socket.on('connect', function() {
                    if (config.callback) config.callback(socket);
                });

                socket.send = function(message) {
                    socket.emit('message', {
                        sender: sender,
                        data: message
                    });
                };

                socket.on('message', config.onmessage);
            };

            rmc.body = document.getElementById('videos-container');

            // http://www.rtcmulticonnection.org/docs/#getExternalIceServers
            rmc.getExternalIceServers = false;

            document.getElementById('openRoom').onclick = function() {
                this.disabled = true;
                // http://www.rtcmulticonnection.org/docs/open/
                rmc.open();
            };

            document.getElementById('joinRoom').onclick = function() {
                this.disabled = true;

                // http://www.rtcmulticonnection.org/docs/connect/
                rmc.connect();
            };

            window.onbeforeunload = function() {
                // Firefox
                document.getElementById('openRoom').disabled = false;
                document.getElementById('joinRoom').disabled = false;
            };

            rmc.onMediaCaptured = function() {
                document.getElementById('openRoom').disabled = true;
                document.getElementById('joinRoom').disabled = true;
            };

            rmc.onstream = function(event) {
                rmc.body.appendChild(event.mediaElement);

                if(event.type === 'remote' && !recorders.length) {
                    document.getElementById('shareScreen').disabled = false;
                    document.getElementById('recordAudioVideo').disabled = false;
                }
            };

            document.getElementById('shareScreen').onclick = function() {
                this.disabled = true;

                // http://www.rtcmulticonnection.org/docs/addStream/
                rmc.addStream({
                    screen: true,
                    oneway: true
                });
            };

            var recorders = [];
            document.getElementById('recordAudioVideo').onclick = function() {
                var streams = rmc.streams.selectAll({
                    local: true
                });

                streams = streams.concat(rmc.streams.selectAll({
                    remote: true
                }));

                var button = this;

                if (button.innerHTML == 'Record Audio+Video+Screen') {
                    button.disabled = true;

                    streams.forEach(function(streamEvent) {
                        var recorder = RecordRTC(streamEvent.stream, {
                            type: 'video'
                        });

                        recorder.startRecording();

                        recorders.push(recorder);
                    });

                    setTimeout(function() {
                        button.innerHTML = 'Stop Recording Audio/Video';
                        button.disabled = false;
                    }, 3000);
                } else if (button.innerHTML == 'Stop Recording Audio/Video') {
                    recorders.forEach(function(recorder) {
                        recorder.stopRecording(function() {
                            appendRecordedVideo(recorder.blob);
                        });
                    });

                    recorders = [];
                    button.innerHTML = 'Record Audio+Video+Screen';
                }
            };

            var recordedVideos = document.getElementById('recorded-videos');
            function appendRecordedVideo(blob) {
                if(blob.video) {
                    blob = blob.video;
                }

                var video = document.createElement('video');
                video.controls = true;
                video.src = URL.createObjectURL(blob);
                recordedVideos.appendChild(video);
            }
        </script>

        <section class="experiment own-widgets latest-commits">
            <h2 class="header" id="updates" style="color: red;padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RTCMultiConnection/commits/master">Latest Updates</a></h2>
            <div id="github-commits"></div>
        </section>

        <section class="experiment own-widgets">
            <h2 class="header" id="updates" style="color: red;padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RTCMultiConnection/issues">Latest Issues</a></h2>
            <div id="github-issues"></div>
        </section>

        <section class="experiment">
            <h2 class="header" id="feedback">Feedback</h2>
            <div>
                <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left:1em;">Enter your email too; if you want "direct" reply!</small>
        </section>

        <a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>

        <script>
            window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';
        </script>
        <script src="https://cdn.webrtc-experiment.com/commits.js" async></script>

    </article>

    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com">WebRTC Experiments</a> © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
            <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            <a href="https://github.com/muaz-khan" target="_blank">Github</a>
        </p>
    </footer>

</body>

</html>
